<template>
	<view class="container">
		<!-- 收货地址 -->
		<view class="address-section" @click="selectAddress">
			<view class="address-info" v-if="selectedAddress">
				<view class="user-info">
					<text class="name">{{selectedAddress.name}}</text>
					<text class="phone">{{selectedAddress.phone}}</text>
					<text class="tag" v-if="selectedAddress.isDefault">默认</text>
				</view>
				<view class="address-detail">
					<text>{{selectedAddress.province}}{{selectedAddress.city}}{{selectedAddress.district}}{{selectedAddress.address}}</text>
				</view>
			</view>
			<view class="no-address" v-else>
				<text class="add-icon">+</text>
				<text class="add-text">添加收货地址</text>
			</view>
		</view>
		
		<!-- 商品列表 -->
		<view class="product-section">
			<view class="product-item" v-for="(item, index) in productList" :key="index">
				<image :src="item.image" mode="aspectFill" class="product-img"></image>
				<view class="product-info">
					<text class="product-name">{{item.name}}</text>
					<text class="product-specs">{{item.specs}}</text>
					<view class="product-bottom">
						<text class="product-price">¥{{item.price}}</text>
						<text class="product-quantity">x{{item.quantity}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 优惠券选择 -->
		<view class="coupon-section" @click="selectCoupon">
			<text class="section-title">优惠券</text>
			<view class="coupon-info">
				<text class="coupon-text" v-if="selectedCoupon">已选择{{selectedCoupon.amount}}元优惠券</text>
				<text class="coupon-text" v-else>未使用优惠券</text>
				<text class="arrow">></text>
			</view>
		</view>
		
		<!-- 备注信息 -->
		<view class="remark-section">
			<text class="section-title">备注</text>
			<input type="text" v-model="remark" placeholder="请输入备注信息" class="remark-input" />
		</view>
		
		<!-- 价格信息 -->
		<view class="price-section">
			<view class="price-item">
				<text>商品总额</text>
				<text>¥{{totalPrice}}</text>
			</view>
			<view class="price-item">
				<text>优惠金额</text>
				<text class="discount">-¥{{discountAmount}}</text>
			</view>
			<view class="price-item">
				<text>运费</text>
				<text>¥{{freight}}</text>
			</view>
			<view class="price-item total">
				<text>实付金额</text>
				<text class="total-price">¥{{finalPrice}}</text>
			</view>
		</view>
		
		<!-- 底部结算栏 -->
		<view class="footer">
			<view class="price-info">
				<text>实付金额：</text>
				<text class="total-price">¥{{finalPrice}}</text>
			</view>
			<button class="submit-btn" @click="submitOrder">提交订单</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 收货地址
const selectedAddress = ref({
	id: 1,
	name: '张三',
	phone: '13800138000',
	province: '重庆市',
	city: '重庆市',
	district: '渝中区',
	address: '解放碑街道',
	isDefault: true
})

// 商品列表
const productList = ref([])

// 页面加载
onMounted(() => {
	// 获取页面参数
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const { items, totalAmount } = currentPage.$page.options
	
	if (items) {
		// 解析商品数据
		productList.value = JSON.parse(decodeURIComponent(items))
	}
})

// 优惠券
const selectedCoupon = ref({
	id: 1,
	name: '新人专享券',
	amount: '10',
	condition: '50'
})

// 备注信息
const remark = ref('')

// 运费
const freight = ref('0')

// 计算商品总额
const totalPrice = computed(() => {
	return productList.value.reduce((total, item) => {
		return total + Number(item.price) * item.quantity
	}, 0).toFixed(2)
})

// 计算优惠金额
const discountAmount = computed(() => {
	return selectedCoupon.value ? selectedCoupon.value.amount : '0'
})

// 计算实付金额
const finalPrice = computed(() => {
	const total = Number(totalPrice.value)
	const discount = Number(discountAmount.value)
	const freightAmount = Number(freight.value)
	return (total - discount + freightAmount).toFixed(2)
})

// 选择收货地址
const selectAddress = () => {
	uni.navigateTo({
		url: '/pages/address/index?select=1'
	})
}

// 选择优惠券
const selectCoupon = () => {
	uni.navigateTo({
		url: '/pages/coupon/index?select=1'
	})
}

// 提交订单
const submitOrder = () => {
	if (!selectedAddress.value) {
		uni.showToast({
			title: '请选择收货地址',
			icon: 'none'
		})
		return
	}
	
	// 这里可以添加提交订单的接口调用
	uni.showLoading({
		title: '提交中...'
	})
	
	// 模拟提交成功
	setTimeout(() => {
		uni.hideLoading()
		uni.showToast({
			title: '提交成功',
			icon: 'success'
		})
		
		// 跳转到支付页面
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/order/payment'
			})
		}, 1500)
	}, 2000)
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #F5F5F5;
	padding-bottom: 120rpx;
}

/* 收货地址样式 */
.address-section {
	background-color: #FFFFFF;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.address-info {
	display: flex;
	flex-direction: column;
}

.user-info {
	margin-bottom: 10rpx;
}

.name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-right: 20rpx;
}

.phone {
	font-size: 28rpx;
	color: #666;
}

.tag {
	font-size: 24rpx;
	color: #D02B29;
	background-color: #FFF0F0;
	padding: 4rpx 10rpx;
	border-radius: 4rpx;
	margin-left: 20rpx;
}

.address-detail {
	font-size: 28rpx;
	color: #333;
}

.no-address {
	display: flex;
	align-items: center;
}

.add-icon {
	font-size: 40rpx;
	color: #D02B29;
	margin-right: 10rpx;
}

.add-text {
	font-size: 32rpx;
	color: #D02B29;
}

/* 商品列表样式 */
.product-section {
	background-color: #FFFFFF;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.product-item {
	display: flex;
	margin-bottom: 20rpx;
}

.product-item:last-child {
	margin-bottom: 0;
}

.product-img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.product-name {
	font-size: 28rpx;
	color: #333;
}

.product-specs {
	font-size: 24rpx;
	color: #999;
}

.product-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-price {
	font-size: 28rpx;
	color: #D02B29;
	font-weight: bold;
}

.product-quantity {
	font-size: 24rpx;
	color: #999;
}

/* 优惠券样式 */
.coupon-section {
	background-color: #FFFFFF;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.section-title {
	font-size: 28rpx;
	color: #333;
}

.coupon-info {
	display: flex;
	align-items: center;
}

.coupon-text {
	font-size: 28rpx;
	color: #666;
	margin-right: 10rpx;
}

.arrow {
	color: #999;
}

/* 备注样式 */
.remark-section {
	background-color: #FFFFFF;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.remark-input {
	font-size: 28rpx;
	color: #333;
}

/* 价格信息样式 */
.price-section {
	background-color: #FFFFFF;
	padding: 20rpx;
}

.price-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	color: #666;
}

.price-item.total {
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #EEEEEE;
}

.discount {
	color: #D02B29;
}

.total-price {
	font-size: 36rpx;
	color: #D02B29;
	font-weight: bold;
}

/* 底部结算栏样式 */
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
}

.price-info {
	flex: 1;
	font-size: 28rpx;
	color: #666;
}

.submit-btn {
	width: 300rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #D02B29;
	color: #FFFFFF;
	border-radius: 40rpx;
	font-size: 32rpx;
}
</style> 